<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: whitesmoke;
        }

        .box {
            width: 400px;
            height: 380px;
            margin: 150px auto;
            background-color: white;
            border: 1px solid white;
        }

        h3 {
            text-align: center;
            margin: 30px 0;
        }

        img {
            width: 250px;
            height: 250px;
            margin: 10px 70px;
            text-align: center;
        }

        [name] {
            margin: 10px 70px;
            width: 250px;
            height: 30px;
        }

        .uname {
            border: none;
            outline: none;
            border: 1px solid rgb(28, 206, 129);
        }

        .password {
            border: none;
            outline: none;
            border: 1px solid rgb(28, 206, 129);
        }

        .agree a {

            text-decoration: none;
            color: rgb(28, 206, 129);
        }

        .agree input {
            vertical-align: middle;
        }

        .major a {
            text-decoration: none;
            color: white;
        }

        .agree {
            font-size: 14PX;
            margin: 10px 70px;
        }

        .major {
            text-align: center;
            margin: 20px auto;
            width: 250px;
            height: 40px;
            line-height: 40px;
            background-color: rgb(28, 206, 129);
        }

        .head {
            width: 250px;
            margin: 10px 70px;
        }

        .content {
            margin: 50px 0;
        }

        .last {
            margin: 10px 70px;
        }

        .login {
            float: right;

        }

        .forget {
            float: left;
        }

        .head a {
            text-decoration: none;
            color: black;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .login a {
            text-decoration: none;
            color: black;
        }

        .forget a {
            text-decoration: none;
            color: black;
        }

        .head .active {
            border-bottom: 2px solid green;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="head">
            <a href="#" class="left active" data-id="0">账户登录</a>
            <a href="#" class="right" data-id="1">二维码登录</a>
        </div>
        <div class="content">
            <div>
                <input type="text" class="uname" name="uname" placeholder="请输入用户名或手机号">
            </div>
            <div>
                <input type="password" class="password" name="password" placeholder="请输入密码">
            </div>
            <div class="agree">
                <input type="checkbox" class="checked">我已同意<a href="用户协议.html" target="_blank">《用户协议》</a>
                <input type="checkbox" id="rememberMe">记住密码
            </div>
            <form>
                <div class="major">
                    <a href="首页.html">登录</a>
                </div>
            </form>
            <div class="last">
                <div class="login">
                    <a href="注册界面.html">免费注册</a>
                </div>
                <div class="forget">
                    <a href="忘记密码.html">忘记密码？</a>
                </div>
            </div>

        </div>
        <div class="content" style="display: none;">
            <img src="imges/2.jpg" alt="">
        </div>
    </div>
    <script>
        const head = document.querySelector('.head')
        const content = document.querySelectorAll('.content')
        const form = document.querySelector('form');
        const name = document.querySelector('.uname');
        const password = document.querySelector('.password');
        const agree = document.querySelector('.checked');
        const rememberMe = document.getElementById('rememberMe');
        const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : [];
        if (user.length !== 0) {
            const rememberPassword = user[0].password;
            const rememberUsername = user[0].username;
            name.value = rememberUsername;
            password.value = rememberPassword;
            rememberMe.checked = true;
            agree.checked = true;
            setTimeout(() => {
                alert('自动登录成功')
                location.href = '首页.html';
            }, 1000);


        }

        head.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                head.querySelector('.active').classList.remove('active');
                e.target.classList.add('active')
                for (let i = 0; i < content.length; i++) {
                    content[i].style.display = 'none'
                    content[e.target.dataset.id].style.display = 'block'
                }
            }
        })
        // ... existing code ...
        // 获取同意协议的复选框元素


        form.addEventListener('click', function (e) {
            if (agree.checked === false) {
                e.preventDefault()
                return alert('请勾选同意协议')
            }
            const inputUsername = name.value;
            const inputPassword = password.value;

            // 查找本地存储中是否存在匹配的用户信息
            let isAuthenticated = false;
            for (let i = 0; i < user.length; i++) {
                if (user[i].username === inputUsername && user[i].password === inputPassword) {
                    isAuthenticated = true;
                    break;
                }
            }
            if (!isAuthenticated) {
                e.preventDefault();
                return alert('用户名或密码错误');
            }


        });

        // ... existing code ...
    </script>
</body>

</html>